<template>
  <div>

    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">作业管理</el-menu-item>
      <el-menu-item index="2"@click="jump">文件管理</el-menu-item>
    </el-menu>
    <div class="line"></div>


    <el-card style="padding: 10px">

      <el-form :model="queryParams">
        <el-input
          style="width: 240px"
          v-model="queryParams.teacherId"
          placeholder="请输入教师id"
        />
        <el-button >查   询</el-button>
        <el-button @click="insertProblem">添加题目</el-button>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column label="id" align="center" prop="number.number" width="150px"/>
        <!--        <el-table-column label="题目" align="center" prop="title" />-->
        <el-table-column prop="title" label="题目">
          <template slot-scope="scope">
            <div v-html="scope.row.title"></div>
          </template>
        </el-table-column>

        <!--        <el-table-column label="内容" align="center">-->
        <!--          <template slot-scope="{ tableData }">-->
        <!--            <div-->
        <!--              id="content"-->
        <!--              v-html="tableData.title"-->
        <!--              style="-->
        <!--              overflow: hidden;-->
        <!--              text-overflow: ellipsis;-->
        <!--              white-space: nowrap;-->
        <!--              width: 100%;-->
        <!--              height: 34px;-->
        <!--              text-align: center;-->
        <!--            "-->
        <!--            ></div>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column label="标签" align="center" prop="labelId" width="80px"/>
        <el-table-column label="分值" align="center" prop="score" width="80px"/>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="QuestionEdit(scope.row)">编 辑</el-button>
            <el-button type="primary"size="mini" @click="QuestionDelete(scope.row)">删除</el-button>

            <el-popover
              placement="top"
              width="160"
              style="margin-left: 10px"
              v-model="visible">
              <p>确认删除？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="QuestionDelete(scope.row)">确定</el-button>
              </div>
              <!--              <el-button type="primary"size="mini" slot="reference">删除</el-button>-->
            </el-popover>


          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="添加问题" :visible.sync="dialogFormVisible" width="50%" size="small">
      <el-form label-width="120px">
        <!--        <el-form-item label="内容">-->
        <!--          <el-input v-model="form.title" autocomplete="off"></el-input>-->
        <!--        </el-form-item>-->
        <el-form-item>  <div style="border: 1px solid #ccc;">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
            style="height: 100px; overflow-y: hidden;"
            v-model="form.title"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
          />
        </div></el-form-item>

        <el-form-item label="标签">
          <el-input v-model="form.labelId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分值">
          <el-input v-model="form.score" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑问题" :visible.sync="dialogFormVisible1" width="50%" size="small">
      <el-form label-width="120px">
        <!--        <el-form-item label="内容">-->
        <!--          <el-input v-model="form1.title" autocomplete="off"></el-input>-->
        <!--        </el-form-item>-->
        <el-form-item>
          <div style="border: 1px solid #ccc;">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editor"
              :defaultConfig="toolbarConfig"
              :mode="mode"
            />
            <Editor
              style="height: 100px; overflow-y: hidden;"
              v-model="form1.title"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="onCreated"
            />
          </div>
        </el-form-item>
        <!--        <el-form-item label="题号">-->
        <!--          <el-input v-model="form1.labelId" autocomplete="off"></el-input>-->
        <!--        </el-form-item>-->
        <el-form-item label="标签">
          <el-input v-model="form1.labelId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分值">
          <el-input v-model="form1.score" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
  import { queryQuestionList} from "@/api/teacher/detail/course/detail";

  import { queryProblemByTopicId,eidtProblem,queryProblemById,DeleteProblem,queryByTopicId,saveProblemid} from "@/api/teacher/addTopic";
  import { getUserProfile } from "@/api/system/user";
  import { queryCourseList,saveTopic,queryCourseListByCreator,queryCourseListByTitle,saveProblem,queryByTopic} from "@/api/teacher/detail/course/QuestionBank";
  // import MyEditor from "./MyEditor";
  import Vue from 'vue'
  import {Editor, Toolbar} from "@wangeditor/editor-for-vue";
  // import E from "wangeditor";

  import marked from "marked";
  import hljs from "highlight.js";
  import "highlight.js/styles/monokai-sublime.css";
  import {getToken} from "../../utils/auth";

  export default {
    components: { Editor, Toolbar },
    name: "addTopic",
// components:{
//       MyEditor
// },

    mounted() {
      //初始化
      this.getList();
      marked.setOptions({
        renderer: new marked.Renderer(),
        highlight: function (code) {
          return hljs.highlightAuto(code).value;
        },
        pedantic: false,
        gfm: true,
        tables: true,
        breaks: true,
        sanitize: false,
        smartLists: true,
        smartypants: false,
        xhtml: true,
      });
    },
    created() {
      this.getUser();
//       var editor = new E('#editor')
// // 或者 var editor = new E(document.getElementById('editor'))
// //事实上传入类名也是可以的var editor = new E(document.getElementsByClassName(editor))
// //应该document.getElement开头的都可以但是一般没人这么干
//       editor.create()
//       var editor1 = new E('#div1', '#div2')
//       editor1.create()
    },
    data(){
      return {
        editor: null,
        // html: '',
        toolbarConfig: { },
        editorConfig: {
          placeholder: '请输入内容...',
          MENU_CONF:{
            uploadImage: {
              // 后端上传地址，必填

              // form-data fieldName，后端接口参数名称，默认值wangeditor-uploaded-image
              fieldName: "file",
              // 1M，单个文件的最大体积限制，默认为 2M
              maxFileSize: 1 * 1024 * 1024,
              // 最多可上传几个文件，默认为 100
              maxNumberOfFiles: 10,
              // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
              allowedFileTypes: ['image/*'],
              // 15 秒，超时时间，默认为 10 秒
              timeout: 15 * 1000,
              base64LimitSize: 50 * 1024,
              // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
              // meta: {
              //     token: 'xxx',
              //     otherKey: 'yyy'
              // },
              // 将 meta 拼接到 url 参数中，默认 false
              // metaWithUrl: false,
              // 自定义增加 http  header
               headers: {
                 Authorization: getToken()
               },
              // 跨域是否传递 cookie ，默认为 false
              // withCredentials: true,
            }
          }
        },
        mode: 'simple', // or 'default'


        visible: false,
        dialogFormVisible:false,
        dialogFormVisible1:false,
        form:{},
        form1:{},
        activeIndex: '1',
        activeIndex2: '1',
        queryParams: {
          pageNum: undefined,
          pageSize: undefined,
          teacherId: null,
        },
        user: {},
        tableData: [],
        data1:null,
        // llength:null

        llength:null

      }
    },
    methods: {
      getUser() {
        this.id = this.$route.query.id//创建作业后传过来title
        queryProblemByTopicId(this.id).then(response => {
          this.tableData = response
          // console.log(response[0].number)
          // console.log(111)
          console.log(response.valueOf())
          // const mylength = response.length
          // llength = mylength
          // llength = response.length
          this.llength = response.length
        })

      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      QuestionEdit(row){
        this.dialogFormVisible1 = true
        console.log(row.id)
        queryProblemById(row.id).then(response =>{
          console.log(response)
          this.form1 = response
        })
        // this.dialogFormVisible = true,
        //   this.form =
        // eidtProblem()
      },
      insertProblem(){
        this.dialogFormVisible = true,
          this.form = {}
        this.id = this.$route.query.id//创建作业后传过来title
        queryByTopicId(this.id).then(response =>{//通过id获取作业基本信息
          this.form.topicId = (response.id)
          this.form.creator = (response.creator)
          console.log('111')
          console.log(this.form)
        })

      },
      save(){
        saveProblem(this.form).then(response =>{
          if (response.code === 200){
            this.$message.success("添加题目成功")
            this.dialogFormVisible = false


            this.id = this.$route.query.id//创建作业后传过来title
            queryProblemByTopicId(this.id).then(response => {
              this.tableData = response
            })

          }else {
            this.$message.error("添加题目失败")
          }
        })
      },
      edit(){
        console.log(this.form1)
        eidtProblem(this.form1).then(response =>{

          if (response.code === 200){
            this.$message.success("修改题目成功")
            this.dialogFormVisible1 = false
            this.id = this.$route.query.id//创建作业后传过来title
            queryProblemByTopicId(this.id).then(response => {
              this.tableData = response
            })

          }else {
            this.$message.error("修改题目失败")
          }
        })
      },
      QuestionDelete(row){
        DeleteProblem(row.id).then(response =>{
          if (response.code === 200) {
            this.$message.success("删除成功")
            this.visible = false
            this.id = this.$route.query.id//创建作业后传过来title
            queryProblemByTopicId(this.id).then(response => {
              this.tableData = response
            })
          }else
          {
            this.$message.error("删除失败")
          }
        })
      },
      jump(){
        this.$router.push('teacher/FileBank')
      },


      onCreated(editor) {
        this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      },
    },
    // mounted() {
    //   // 模拟 ajax 请求，异步渲染编辑器
    //   setTimeout(() => {
    //     this.html = ''
    //   }, 1500)
    // },
    beforeDestroy() {
      const editor = this.editor
      if (editor == null) return
      editor.destroy() // 组件销毁时，及时销毁编辑器
    }

  }
</script>

<style scoped>

</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>
